<template>
  <div class="dashboard-container">
    <div class="app-container">
      <PageTools>
        <template v-slot:before>
          共13条记录
        </template>
        <!-- #是v-slot的简写 -->
        <template #after>
          <el-button size="small" type="danger" @click="exportFn">导出</el-button>
          <el-button
            size="small"
            type="success"
            @click="$router.push('/employees/import')"
          >导入</el-button>
          <el-button
            size="small"
            type="primary"
            @click="addFn"
          >新增员工</el-button>
        </template>
      </PageTools>
      <el-card>
        <!-- 表格 -->
        <el-table :data="tableData">
          <el-table-column label="序号" type="index" />
          <el-table-column label="姓名" prop="username" />
          <el-table-column label="头像" prop="staffPhoto">
            <template v-slot="{row}">
              <img
                v-imgerror="require('@/assets/common/bigUserHeader.png')"
                style="width: 50px;"
                :src="row.staffPhoto"
                alt=""
              >
            </template>
          </el-table-column>
          <el-table-column label="手机号" prop="mobile" />
          <el-table-column label="工号" prop="workNumber" />
          <el-table-column
            label="聘用形式"
            prop="formOfEmployment"
            :formatter="formatEmployment"
          />
          <el-table-column label="部门" prop="departmentName" />
          <el-table-column label="入职时间" prop="timeOfEntry">
            <template v-slot="{row}">
              <span>{{ row.timeOfEntry | formatDate }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" prop="enableState">
            <template v-slot="{row}">
              <!-- 状态值为1 表示启用状态，否则关闭状态
               -->
              <!-- switch组件
              value: 绑定一个布尔值，当布尔值为true表示启动状态，否则关闭状态
              active-color: 设置启动状态的背景颜色
              inactive-color: 设置关闭状态的背景颜色
              v-model: 默认绑定一个布尔值
                如果想要改变的话可以通过以下两个属性进行改变
                active-value：设置启动状态的值
                inactive-value：设置关闭状态的值
               -->
              <!-- :value="row.enableState === 1" -->
              <el-switch
                v-model="row.enableState"
                active-color="#13ce66"
                inactive-color="#666"
                :active-value="1"
                :inactive-value="0"
              />
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="{row}">
              <el-button type="text" @click="toDetail(row.id)">查看</el-button>
              <el-button type="text">转正</el-button>
              <el-button type="text">调岗</el-button>
              <el-button type="text">离职</el-button>
              <el-button type="text" @click="assignRoleFn(row.id)">角色</el-button>
              <el-button type="text" @click="delFn(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-row type="flex" justify="center">
          <el-pagination
            layout="total, prev, pager, next"
            :page-size="size"
            :total="total"
            @current-change="currentChange"
          />
        </el-row>
      </el-card>
      <!-- 新增 -->
      <AddEmployee
        :show-dialog.sync="showDialog"
        @updateEvent="getUserList"
      />
      <!-- 分配角色 -->
      <AssignRole ref="assignRole" :show-dialog.sync="visibleDialog" />
    </div>
  </div>
</template>

<script>
import { getUserList, delEmployee } from '@/api/employees'
import employees from '@/api/constant/employees.js'
import AddEmployee from './components/add-employee.vue'
import { export_json_to_excel } from '@/vendor/Export2Excel'
import { formatDate } from '@/filters/index.js'
import AssignRole from './components/assign-role.vue'
export default {
  components: { AddEmployee, AssignRole },
  data() {
    return {
      showDialog: false,
      visibleDialog: false,
      tableData: [],
      total: 0,
      size: 5, // 每页展示的数量
      page: 1
    }
  },
  created() {
    // 获取员工列表
    this.getUserList()
  },
  methods: {
    // 分配角色
    assignRoleFn(id) {
      this.visibleDialog = true
      // 把当前员工的id传递给子组件
      this.$refs.assignRole.curId = id
      this.$refs.assignRole.getEmployeeDetail()
    },
    // 跳转到员工详情页面
    toDetail(id) {
      this.$router.push('/employees/detail/' + id)
    },
    // 导出
    async exportFn() {
      // 调用接口获取所有员工列表数据
      const res = await getUserList({
        page: 1,
        size: this.total
      })
      console.log(131, res)
      // 把数据改造为插件需要的数据格式
      const result = res.rows.map(item => {
        return this.objToArr(item)
      })
      // console.log(result)
      // 导出插件的使用
      const header = ['手机号', '姓名', '入职日期', '转正日期', '工号']
      // const data = [
      //   ['13232345456', '小明', '2022-02-12', '2022-05-12', '2132'],
      //   ['13232345457', '小芳', '2022-02-12', '2022-05-12', '2132'],
      //   ['13232345458', '小栏', '2022-02-12', '2022-05-12', '2132']
      // ]
      export_json_to_excel({
        header,
        data: result
      })
    },
    objToArr(item) {
      const arr = []
      // 把item对象中的数据 读取并放到arr数组中即可
      const user = {
        'mobile': '手机号',
        'username': '姓名',
        'timeOfEntry': '入职日期',
        'correctionTime': '转正日期',
        'workNumber': '工号'
      }
      for (const key in user) {
        if (key === 'timeOfEntry' || key === 'correctionTime') {
          // 转换日期格式
          arr.push(formatDate(item[key], 'yyyy/MM/dd'))
        } else {
          arr.push(item[key])
        }
      }
      return arr
    },
    // 删除员工
    delFn(id) {
      this.$confirm('是否确定删除？', '删除', {
        type: 'warning'
      }).then(async() => {
        // 调用删除接口
        await delEmployee(id)
        // 防止删除最后一页最后一条数据之后，页面显示no data的情况
        if (this.tableData.length === 1 && this.page !== 1) {
          this.page--
        }
        // 刷新列表
        this.getUserList()
      }).catch(err => {
        console.log('取消：', err)
      })
    },
    // 新增员工
    addFn() {
      this.showDialog = true
    },
    // 格式化聘用形式
    formatEmployment(row, column, cellValue, index) {
      // console.log(row, column, cellValue, index)
      // row: 表示当前行的数据对象
      // column：包含当前列表相关信息的对象
      // cellValue: 当前列属性对应的值
      // index：下标值
      // 函数返回什么内容，将来表格中就显示什么内容。
      // find方法：是数组的方法，会查找并返回符合条件的数据对象
      const obj = employees.hireType.find(item => Number(item.id) === Number(cellValue))
      // console.log(88, obj)
      return obj && obj.value || '未知'
      // return obj ? obj.value : '未知'
    },
    // 实现分页
    currentChange(page) {
      // console.log(79, page)
      this.page = page
      this.getUserList()
    },
    async getUserList() {
      const res = await getUserList({
        page: this.page,
        size: this.size
      })
      // 保存员工列表和总数量
      this.tableData = res.rows
      this.total = res.total
    }
  }
}
</script>

<style>

</style>
